<template>
  <!-- Univer Sheet 渲染容器 -->
  <button @click="exportXlsx">导出数据</button>
</template>

<script lang="ts" setup>
import { useCmpSheetsUseExport } from '@/components/sheets/CmpSheetsUseExport'
const exportXlsx = () => {
  const { exportToExcel } = useCmpSheetsUseExport()
  exportToExcel(null, '123123')
}

type IAny = Record<string, string | number | boolean>

function groupBy(array: Array<IAny>, key: string) {
  const result: {
    [
      key: string | number
    ]: // | IAny | { [key: string | number]: IAny } | Array<IAny | { [key: string | number]: IAny }>
    Array<IAny | { [key: string | number]: IAny }>
  } = {}

  array.forEach((item) => {
    // 根据字符串动态获取分组键的值
    const keyValue = item[key]
    if (typeof keyValue === 'boolean') throw new Error('参数key的项 不能为 boolean类型')

    // 如果结果对象中还没有这个键，则初始化为空数组
    if (!result[keyValue]) {
      result[keyValue] = []
    }

    // 将当前元素添加到对应的分组中
    result[keyValue].push(item)
  })

  return result
}

// 数据源
const data = [
  { date: '2025-01-01', timeSlot: 'am', fridgeId: '001', temperature: '28', signature: '43' },
  { date: '2025-01-01', timeSlot: 'pm', fridgeId: '001', temperature: '33', signature: '44' },
  { date: '2025-01-02', timeSlot: 'am', fridgeId: '001', temperature: '26', signature: '30' },
  { date: '2025-01-02', timeSlot: 'pm', fridgeId: '001', temperature: '22', signature: '40' },
]

console.log(groupBy(data, 'date'))
// 通过这种方式进行设置
console.log(groupBy(data, 'date')[Object.keys(groupBy(data, 'date'))[0]])
</script>

<style>
#univer-container {
  width: 100%;
  height: 100vh;
}
</style>
